﻿@page "/maps/multi-layer"


@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the layers along with sublayers. Texas and California states are rendered as the sublayer of USA map.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to render a sublayer in map. Sublayers are used to render the desired shapes over the existing layers. Any number of sublayers can be added to a map. You can use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Fill'>Fill</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BorderModel.html#Syncfusion_Blazor_Maps_BorderModel_Width'>Width</a></code>, and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BorderModel.html#Syncfusion_Blazor_Maps_BorderModel_Color'>Color</a></code> properties in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor__ctor'>MapsShapeSettings</a></code> property to customize the appearance of the shapes.</p>
   <p>More information about multiple-layer can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/layers/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsTitleSettings Text="Samsung Semiconductor office locations in USA">
            <MapsTitleTextStyle Size="16px"/>
        </MapsTitleSettings>
        <MapsZoomSettings Enable="false"/>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/usa.json"}' TValue="string">
                <MapsShapeSettings Fill="#E5E5E5">
                    <MapsShapeBorder Color="#000000" Width="0.2"/>
                </MapsShapeSettings>
                <MapsDataLabelSettings Visible="true" LabelPath="iso_3166_2" SmartLabelMode="SmartLabelMode.Hide"/>
            </MapsLayer>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/texas.json"}' Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
                <MapsShapeSettings Fill="#8ccdff">
                    <MapsShapeBorder Color="#1a9cff" Width="0.25"/>
                </MapsShapeSettings>
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" Width="15" Height="15" Shape="MarkerType.Circle" Fill="#004c98" DataSource="@MarkerDataSource" TValue="string" AnimationDuration="0">
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>${Name}</b><br>Manufacturing Center,<br>Research and Development Center"/>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@MarkerDataSources" TValue="MapMarker">
                        <MarkerTemplate>
                            @{
                                var Data= context as MapMarker;
                                <div class="texasMarker">@Data.Name</div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/california.json"}' Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
                <MapsShapeSettings Fill="#8ccdff">
                    <MapsShapeBorder Color="#1a9cff" Width="0.25"/>
                </MapsShapeSettings>
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" Width="15" Height="15" Shape="MarkerType.Circle" Fill="#004c98" DataSource="@FirstMarker" TValue="MapMarker" AnimationDuration="0">
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>${Name}</b><br>Regional Office,<br>Research and Development Center"/>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@SecondMarker" TValue="MapMarker">
                        <MarkerTemplate>
                            @{
                                var Data= context as MapMarker;
                                <div class="californiaMarker">@Data.Name</div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="http://www.samsung.com/semiconductor/about-us/location/" target="_blank">www.samsung.com</a>
    </div>
</div>
<style>
    .texasMarker {
        font-size: 12px;
        color: black;
        margin-left:-10px;
        margin-top:-10px;
    }
    .californiaMarker {
        font-size: 12px;
        color: black;
        margin-left:-15px;
        margin-top:-5px;
    }
</style>
@code {
    public class MapMarker {
        public double Latitude {get; set;}
        public double Longitude {get; set;}
        public string Name {get; set;}
    };
    public List<MapMarker> MarkerDataSource = new List<MapMarker> {
        new MapMarker {Latitude=30.267153, Longitude=-97.7430608, Name="Austin" }
    };
    public List<MapMarker> MarkerDataSources = new List<MapMarker> {
        new MapMarker {Latitude=31.80289258670676, Longitude=-98.96484375, Name="TX" }
    };
    public List<MapMarker> FirstMarker = new List<MapMarker> {
        new MapMarker {Latitude=37.3382082, Longitude=-121.8863286, Name="San Jose" }
    };
    public List<MapMarker> SecondMarker = new List<MapMarker> {
        new MapMarker {Latitude=37.09023980307208, Longitude=-119.35546875000001, Name="CA" }
    };
}